<!-- 交租状态 -->
<template>
  <div>
    <navbar
      title="房租缴费"
      hasMenu
      backToApp
      v-on:toggleMenu="showPopover = !showPopover"></navbar>
    <popover
      v-show="showPopover"
      v-on:clickItem="onClickPopoverItem"
      v-bind:items="[{ action: 'modify', text: '编辑租约' }, { action: 'history', text: '交租记录' }]"
    ></popover>
    <layout-main
      v-if="showPage"
      v-on:scroll="onScrollLayout"
      v-on:click="onClickLayout"
    >
      <orderItem
        v-bind:rentStartTime="order.contractStartDate"
        v-bind:rentEndTime="order.contractEndDate"
        v-bind:monthRent="order.monthRent"
        v-bind:rentDay="order.deliveryDate"
        v-bind:status="order.status"
        v-bind:rentPayMonth="order.rentPayMonth"
        rentType="月付"
      ></orderItem>
      <orderStatus
        v-bind:statusTitle="statusTitle"
        v-bind:statusDesc1="statusDesc1"
        v-bind:statusDesc2="statusDesc2"
        v-bind:statusAction="statusAction"
        v-on:action="handleAction"
      ></orderStatus>
    </layout-main>
  </div>
</template>

<script>
  // UI组件
  import layoutMain from '../layout'
  import navbar from '../components/Navbar'
  import popover from '../components/Popover'
  import orderItem from '../components/OrderItem'
  import orderStatus from '../components/OrderStatus'

  // JS依赖
  import weui from 'weui.js'
  import $ from '../assets/util'
  import ajax from '../assets/ajax'

  export default {
    components: {
      navbar,
      popover,
      layoutMain,
      orderItem,
      orderStatus
    },
    data() {
      return {
        showPopover: false,
        showPage: false,
        loading: null,
        error: null,
        mobile: '',
        order: {
          contractStartDate: '', // 租期
          contractEndDate: '',
          monthRent: 0, //月租金
          deliveryDate: 1, // 交租日
          payMonths: '', //交租方式
          status: '',
          rentPayMonth: ''
        },
        statusTitle: '', //
        statusDesc1: '',
        statusDesc2: '',
        statusAction: '联系管家'
      }
    },
    computed: {
      nextPayDate() {
        let year = new Date().getFullYear()
        let month = parseInt(this.order.rentPayMonth, 10) + 1
        if (month > 12) {
          month = 1
          year += 1
        }
        const day = this.order.deliveryDate
        return [year, month, day].join('/')
      }
    },
    created() {
      this.showLoading()
      this.getOrderStatus()
      this.getUserAuthInfo()
    },
    methods: {
      onClickPopoverItem(index) {
        switch (index) {
          case 0:
            // 编辑租约
            $.editRent()
            break

          case 1:
            // 交租记录
            this.$router.push('rentHistory')
            break
        }
      },
      onClickLayout() {
        if (this.showPopover) {
          this.showPopover = false
        }
      },
      onScrollLayout() {
        if (this.showPopover) {
          this.showPopover = false
        }
      },
      showLoading() {
        this.loading = weui.loading('加载中...', {
          className: 'init-loading'
        })
      },
      getUserAuthInfo() {
        // 最新租约订单信息
        this.$store.dispatch({
          type: 'GET_ORDER_INFO',
          mobile: this.$store.state.user.mobile
        }).then(() => {
          this.loading.hide()
          this.showPage = true
          const {
            contractStartDate,
            contractEndDate,
            monthRent,
            deliveryDate,
            payMonths,
            leaseStatus
          } = this.$store.state.order.data
          this.order.contractStartDate = contractStartDate
          this.order.contractEndDate = contractEndDate
          this.order.monthRent = monthRent
          this.order.deliveryDate = deliveryDate
          this.order.payMonths = payMonths
          // 租约状态
          const authStatus = leaseStatus
          if (authStatus === 'CheckPending') {
            // 租约待审核
            this.statusTitle = '您的租约信息正在审核中'
            this.statusDesc1 = '审核通过后您可以开始交租'
            this.statusDesc2 = '我们尽快通知您审核结果'
            this.statusAction = '联系管家'
            // this.statusAction = '前去交租'
          } else if (authStatus === 'TakeEffect') {
            // 租约生效中

            const status = this.order.status
            if (status === '待支付' || status === '支付成功' ||
                  status === '支付失败') {
              this.statusTitle = '下一期房租请于' + this.nextPayDate +
                '日前操作支付'
              this.statusAction = '前去交租'
            } else if (status === '申请退款' || status === '同意退款') {
              this.statusTitle = '您的信息正在处理中'
              this.statusDesc1 = '我们会尽快处理并通知您结果'
              this.statusAction = '联系管家'
            } else if (status === '不同意退款' || status === '退款成功' ||
                status === '退款失败' || status === '转账成功' ||
                status === '转账失败') {
              this.statusTitle = '下一期房租请于' + this.nextPayDate +
                '日前操作支付'
              this.statusAction = '前去交租'
            } else {
              this.statusAction = '前去交租'
            }
          } else if (authStatus === 'Invalid') {
            // 租约已失效
            this.statusTitle = '您当前的租约已到期，请更新您的租约信息'
            this.statusAction = '修改租约'
          } else if (authStatus === 'CheckReturn') {
            // 租约审核失败
            this.statusTitle = '您的租约审核失败，请重新提交'
            this.statusAction = '修改租约'
          }
        })
      },
      getOrderStatus() {
        // 订单处理中还是已处理
        const data = ajax.handleData({
          methodId: '1021',
          data: {
            userId: this.$store.state.user.userId,
            pageSize: 1
          }
        })
        this.$http.post(
          ajax.url,
          data
        ).then((response) => {
          const code = response.body.code
          if (code === '0') {
            const data = response.body.res.data.uoRentOrdersDto[0]
            if (data) {
              this.order.status = data.orderStatus
              this.order.rentPayMonth = data.rentPayMonth
            }
          }
        }, (errResponse) => {
          console.log('error')
        })
      },
      handleAction() {
        const statusAction = this.statusAction
        if (statusAction === '联系管家') {
          $.toIM()
        } else if (statusAction === '修改租约') {
          $.editRent()
        } else if (statusAction === '前去交租') {
          this.$router.push('rentOrder')
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .main {
    padding: 10px;
  }
</style>
